<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>倒计时</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<script type="text/javascript">
window.onload = function(){
	var oFill = document.getElementById("fill_in");
	var oInputYear = oFill.getElementsByTagName("input")[0];
	var oInputMonth = oFill.getElementsByTagName("input")[1];
	var oInputDay = oFill.getElementsByTagName("input")[2];

	//获取下面的4个p
	var oTxtDay = document.getElementById('day');
	var oTxtHours = document.getElementById('hour');
	var oTxtMinutes = document.getElementById('min');
	var otxtSeconds = document.getElementById('sec');

	var oTxtB = document.getElementsByTagName('b')[0];  //b标签
	var oBtn = document.getElementById("go");  //按钮

	function setDight(num,n){   //把年月日的一位数转换成两位
		var str = ''+num;
		if(str.length<n){
			str = '0'+num;
		}
		return str;
	}

	var timer = null;
	oBtn.onclick = function(){
		timer = setInterval(updateTime,1000);   //调用一个定时器
		updateTime();
		oTxtB.innerHTML = oInputYear.value+'年'+oInputMonth.value+'月'+oInputDay.value+'日';

	}
	function updateTime(){     //时间差放在一个函数中
		var oDateEnd = new Date();  //输入的时间
		var oDateNow = new Date();	//现在的时间

		oDateEnd.setFullYear(parseInt(oInputYear.value));
		oDateEnd.setMonth(parseInt(oInputMonth.value)-1);
		oDateEnd.setDate(parseInt(oInputDay.value));
		oDateEnd.setHours(0);
		oDateEnd.setMinutes(0);
		oDateEnd.setSeconds(0);

		//获取前后两个时间差的时间（毫秒）/1000
		var iRemain = (oDateEnd.getTime()-oDateNow.getTime())/1000;
		if(iRemain<=0){
			clearInterval(timer);
			alert('时间已过');
			iRemain = 0;
		}

		var iDay = parseInt(iRemain/86400);
		iRemain %= 86400;
		var iHours = parseInt(iRemain/3600);
		iRemain %= 3600;
		var iMinutes = parseInt(iRemain/60);
		iRemain %= 60;
		var iSeconds = iRemain;

		oTxtDay.innerHTML = setDight(iDay,2);
		oTxtHours.innerHTML = setDight(iHours,2);
		oTxtMinutes.innerHTML = setDight(iMinutes,2);
		otxtSeconds.innerHTML = setDight(iSeconds,2);
		//alert('剩余'+iDay+'天'+iHours+'小时'+iMinutes+'分钟'+iSeconds+'秒');

	}
}
</script>
<body>

<div id="div1">
    <div id="fill_in">
        <span class="title">请输入：</span>
        <input type="text" class="long_text" value="2017" />
        <span class="space1">年</span>
        <input type="text" class="text" value="3" />
        <span class="space2">月</span>
        <input type="text" class="text" value="6" />
        <span class="space3">日</span>
    </div>

    <a href="javascript:;" id="go" class="go"></a>

    <p id="target">
        现在距离 -
        <b>2017年3月6日</b>
        - 还剩：
    </p>

    <div id="date">
        <p id="day">00</p>
        <p id="hour">00</p>
        <p id="min">00</p>
        <p id="sec">00</p>
    </div>
</div>

</body>
</html>
